<html>
<head>
<title>我要排队</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=no">
<link href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"
	rel="stylesheet" type="text/css">
<link href="../../css/yuea2.css" rel="stylesheet" type="text/css">
<script src="../../js/common3.js"></script>
<script src="../../../../common/jquery-3.3.1.min.js"></script>
<script>

	var arrivalTime;
	var arrivalTimeTimer1;
	var timmerFlag = 0;
	$(document).ready(function() {
		init();
		$(".item_num").bind("click", function() {
			var clickId = $(this).attr("id");
			var idPrefix = clickId.substr(0, 2);
			$("span[id*='" + idPrefix + "']").each(function() {
				if ($(this).attr("id") != clickId) {
					$(this).removeClass("item_num_selected");
				}
			});
			$(this).toggleClass("item_num_selected");
			if ($(".item_num_selected").length == 0) {
				$("#linUpNow").addClass("weui-btn_disabled");
			} else {
				$("#linUpNow").removeClass("weui-btn_disabled");
			}
		});
	});
	function init() {
		var Request = new UrlSearch();
		var code = Request.code;
		var url = "/yuea/currentLineUp/getCurrentLineUp?userPageAuthCode="
				+ code;
		$.ajax({
			url : url,
			type : "get",
			success : function(response) {//如果有排队
				if (response.state == "BUSI_STATE_STOP"&&null != response.data && null != response.data.id) {
					$("#currentLineUpDiv").removeClass("div_hidden");
					$("#currentLineUpDiv").addClass("div_show_block");
					var data = response.data;
					$("#serviceItems").text(data.serviceItemsDes);
					$("#currentLineUpId").val(data.id);
					$("#verificationCode").text(data.verificationCode);
					arrivalTime = new Date(data.arrivalTime);
					$("#arrivalTime").text(
							formatDateTime(arrivalTime.getTime()));
					if (arrivalTime < new Date().getTime()) {
						$("#leftTime").text("已过期");
					} else {
						if (timmerFlag == 0) {
							leftTimer(arrivalTime, "leftTime");//立即执行一次
							arrivalTimeTimer1 = setInterval(
									'leftTimer(arrivalTime,"leftTime")',
									1000);
						}
					}
				} else {//如果没有排队
					$("#currentLineUpDiv").removeClass("div_show_block");
					$("#currentLineUpDiv").addClass("div_hidden");
					$("#beginLineUpDiv").removeClass("div_hidden");
					$("#beginLineUpDiv").addClass("div_show_block");
					/* if (response.data.personNumBefore == 0) {
						response.data.personNumBefore = 1;
						response.data.waiteMinutes = 15;
					} */
					$("#beforePersonNum").text(
							response.data.personNumBefore + "人");
					var hour = parseInt(response.data.waiteMinutes / 60);
					var minute = response.data.waiteMinutes % 60;
					var waitTimeStr = "";
					if (hour != 0) {
						waitTimeStr = hour + "小时";
					}
					waitTimeStr = waitTimeStr + minute + "分钟";
					$("#waitTime").text(waitTimeStr);
				}
			}
		})
	}

	function beginLineUp() {
		if ($(".item_num_selected").length == 0) {
			return;
		}
		var serviceItems = new Array();
		$(".item_num_selected").each(function(i) {
			var item = {};
			var value = this.id.split("-");
			item.serviceCode = value[0];
			item.personNum = value[1];
			serviceItems.push(item);
		});
		var data = {};
		data.serviceItems = serviceItems;

		var Request = new UrlSearch();
		var code = Request.code;
		var url = "/yuea/currentLineUp/beginLineUp?userPageAuthCode=" + code;
		$.ajax({
			url : url,
			type : "post",
			data : JSON.stringify(data),
			contentType : "application/json",
			dataType : "json",
			success : function(response) {
				if (response.id != null) {
					$("#beginLineUpDiv").addClass("div_hidden");
					$("#beginLineUpDiv").removeClass("div_show_block");
					init();
				}
			}
		})
	}

	function delay() {
		var Request = new UrlSearch();
		var code = Request.code;
		var url = "/yuea/currentLineUp/delay?userPageAuthCode=" + code;
		var data = {};
		data.id = $("#currentLineUpId").val();
		$.ajax({
			url : url,
			type : "PATCH",
			data : JSON.stringify(data),
			contentType : "application/json",
			dataType : "json",
			success : function(response) {
				if (response.state == "BUSI_STATE_OK") {
					init();
				}
			}
		})
	}

	function cancel() {
		var Request = new UrlSearch();
		var code = Request.code;
		var url = "/yuea/currentLineUp/cancel?userPageAuthCode=" + code;
		var data = {};
		data.id = $("#currentLineUpId").val();
		$.ajax({
			url : url,
			type : "PATCH",
			data : JSON.stringify(data),
			contentType : "application/json",
			dataType : "json",
			success : function(response) {
				if (response.state == "BUSI_STATE_OK") {
					$("#currentLineUpDiv").addClass("div_hidden");
					$("#beginLineUpDiv").addClass("div_hidden");
					init();
				}
			}
		})
	}
</script>
</head>
<body>
	
	<div id="top" class="weui-panel__bd">
		<div class="weui-media-box weui-media-box_appmsg">
			<div class="weui-media-box__hd">
				<img class="weui-media-box__thumb"
					src=""
					alt="">
			</div>
			<div class="weui-cell__bd">
				<p>尊敬的顾客您好，欢迎光临本店，祝您生活愉快！</p>
				<!-- <p>尊敬的顾客，您已成功排队，若不能及时到店，请及时推迟或取消排队，期待您的光临！</p> -->
			</div>
		</div>
	</div>
	<div id="beginLineUpDiv" class="div_hidden">
		<div>	
			<div class="weui-cell weui-cell_access">
				<span>当前排队状况</span>
			</div>
	
			<div class="weui-form-preview__bd" style="padding: 0px 15px">
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">前方排队人数：</label> 
					<span id="beforePersonNum" class="weui-form-preview__value">9人</span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">大约等待时间：</label>
					<span id="waitTime" class="weui-form-preview__value">1小时20分钟</span>
				</div>
				<!-- <div class="weui-form-preview__item">
					<label class="weui-form-preview__label">现在开始排队，您可在<span id="waitTime">1小时20分钟</span>内到店享受服务。</label>
				</div> -->
			</div>
	
			<div class="weui-cell weui-cell_access" style="padding-top: 15px">
				<span>请至少选择一项服务</span>
			</div>
			<div class="weui-form-preview__bd" style="padding: 0px 15px">
				<table style="width:100%;" >
					<tr>
						<td align="left"><span class="service_item">剪发:</span></td>
						<td align="right"><span class="item_num item_num_selected" id="J-1">1人</span></td>
						<td align="right"><span class="item_num" id="J-2">2人</span></td>
						<td align="right"><span class="item_num" id="J-3">3人</span></td>
						<td align="right"><span class="item_num" id="J-4">4人</span></td>
						<td align="right"><span class="item_num" id="J-5">更多</span></td>
					</tr>
					<tr>
						<td align="left"><label class="service_item">烫发:</label></td>
						<td align="right"><span class="item_num" id="T-1">1人</span></td>
						<td align="right"><span class="item_num" id="T-2">2人</span></td>
						<td align="right"><span class="item_num" id="T-3">3人</span></td>
						<td align="right"><span class="item_num" id="T-4">4人</span></td>
						<td align="right"><span class="item_num" id="T-5">更多</span></td>
					</tr>
					<tr>
						<td align="left"><label class="service_item">染发:</label></td>
						<td align="right"><span class="item_num" id="R-1">1人</span></td>
						<td align="right"><span class="item_num" id="R-2">2人</span></td>
						<td align="right"><span class="item_num" id="R-3">3人</span></td>
						<td align="right"><span class="item_num" id="R-4">4人</span></td>
						<td align="right"><span class="item_num" id="R-5">更多</span></td>
					</tr>
					<tr>
						<td align="left"><label class="service_item">洗头/护理:</label></td>
						<td align="right"><span class="item_num" id="X-1">1人</span></td>
						<td align="right"><span class="item_num" id="X-2">2人</span></td>
						<td align="right"><span class="item_num" id="X-3">3人</span></td>
						<td align="right"><span class="item_num" id="X-4">4人</span></td>
						<td align="right"><span class="item_num" id="X-5">更多</span></td>
					</tr>
				</table>
			</div>
			<div class="button-sp-area" style="padding: 10px 15px">
				<a id="linUpNow" href="javascript:beginLineUp();" class="weui-btn weui-btn_primary">现在排队</a>
			</div>
		</div>
	</div>
	<!-- 当前排队记录 -->
	<div id="currentLineUpDiv" class="div_hidden">
		<div class="weui-form-preview__bd">
			<input type="hidden" id="currentLineUpId"/>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">服务项目：</label> <span
					id="serviceItems" class="weui-form-preview__value"></span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">服务码：</label> <span
					id="verificationCode" class="weui-form-preview__value"></span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">最迟到店时间：</label> <span
					id="arrivalTime" class="weui-form-preview__value"></span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">倒计时：</label> <span
					id="leftTime" class="weui-form-preview__value"></span>
			</div>
		</div>
		<div class="button-sp-area" style="padding:10px 15px">
		    <a href="javascript:delay();" class="weui-btn weui-btn_primary">推迟到队末</a>
		    <a href="javascript:cancel();" class="weui-btn weui-btn_plain-primary">取消排队</a>
		</div>
	</div>
</body>
</html>